// 左右排版的卡片共用头
<template>
    <div :class="['bxm-card', size ? 'bxm-card--' + size : '']">
        <div class="bxm-card__header">
            <bxm-card-title 
                :title="title" 
                :showLeftLine="showLeftLine" 
                :titleStyle="titleStyle">
                <template #sub-title>
                    <slot name="sub-title"></slot>
                </template>
            </bxm-card-title>
            <div>
                <slot></slot>
            </div>
        </div>
        <div v-if="$slots.main" class="bxm-card__main">
            <slot name="main"></slot>
        </div>
    </div>
</template>

<script setup lang="ts">
import BxmCardTitle from './card-title.vue'

    const props = defineProps({
        // 标题
        title: {
            type: String,
            required: true
        },
        // 是否显示左侧的竖线
        showLeftLine: {
            type: Boolean,
            default: true,
            required: false
        },
        // 标题行内样式
        titleStyle: {
            type: String,
            default: '',
            required: false
        },
        // 尺寸 -/large
        size: {
            type: String,
            default: '',
            required: false
        }
    })
</script>

<style lang="scss">
.bxm-card {
    margin-bottom: 8px;
    // background-color: #fff;
    background-color:#ffffff;
    border-radius: 4px;
    box-shadow: 0 3px 11px 0 rgba(163, 171, 186, 0.07);
    font-size: 13px;
    overflow: hidden;
    &__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 10px;
        border-radius: 4px;
        overflow: hidden;
        border-bottom: 1px solid #e3e5ed;
    }
    &__main {
        padding: 16px 8px 16px 16px;
        border-top: 1px solid 4px;
        text-align: left;
    }
}
.bxm-card--large {
    font-size: 14px;
    .bxm-card-title {
        line-height: 48px;
        font-size: 14px;
    }
    .bxm-card__header {
        padding-right: 16px;
    }
    .bxm-card__main {
        padding: 20px 16px;
    }
}
.bxm-card-title {
    display: flex;
    align-items: center;
    padding: 0 16px;
    line-height: 40px;
    font-size: 13px;
    .line {
        width: 4px;
        height: 12px;
        background-color: #6383ff;
        border-radius: 2px;
    }
    .title {
        margin-left: 8px;
        color: #303133;
    }
    .sub-title {
        margin-left: 15px;
    }
}
</style>
